<template>
    <div class="bigbox">
        <div class="imgbox1"><img src="../img/f65e4fdaa63144e70d883956256248a.png" alt=""></div>
        <div class="us">
            <div class="left">
                <div class="eng">
                    PRESS CENTER
                </div>
                <div class="china">新闻中心</div>
            </div>
            <div class="right">
                <div>当前位置：首页>新闻中心</div>
            </div>
        </div>
        <hr>
        <div class="logoto">
            <div class="minbox">
                <div>行业新闻</div>
            </div>
        </div>
        <!-- <hr> -->
        <div class="newsbox">
            <div class="leftimg">
                <img src="../img/f65e4fdaa63144e70d883956256248a.png" alt="">
            </div>
            <div class="fengye">
                <div class="demo-pagination-block">
                    <div class="demonstration">
                        <div class="cor" v-for="item in  newarry.slice(3 * (current - 1), current * 3)" :key="item">
                            <h1>{{ item.h1 }}</h1>
                            <h4>{{ item.h4 }}</h4>
                            <hr>
                        </div>
                    </div>
                    <!-- <el-pagination v-model:current-page="currentPage3" v-model:page-size="pageSize3" :small="small"
                        :disabled="disabled" :background="background" layout="prev, pager, next, jumper"
                        :total="newarry.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->
                    <el-pagination v-model:current-page="currentPage3" v-model:page-size="pageSize3" :small="small"
                        :disabled="disabled" :background="background" layout="prev, pager, next, jumper"
                        :total="newarry.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="3" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import { useStore } from 'vuex'
export default {
    setup() {
        const store = useStore()
        let newarry = reactive(store.state.newarry)

        const currentPage1 = ref(5)
        const currentPage2 = ref(5)
        const currentPage3 = ref(1)
        const currentPage4 = ref(4)
        const pageSize2 = ref(100)
        const pageSize3 = ref(3)
        const pageSize4 = ref(100)
        const small = ref(false)
        const background = ref(false)
        const disabled = ref(false)
        const current = ref(1)
        const handleSizeChange = (val) => {
            console.log('每页显示条数', val);
            console.log(`${val} items per page`)
        }
        const handleCurrentChange = (val) => {
            current.value = val
            console.log(`current page: ${val}`)
        }
        onMounted(() => {
            newarry = store.state.newarry
        })
        return {
            currentPage1,
            currentPage2,
            currentPage3,
            currentPage4,
            pageSize2,
            pageSize3,
            pageSize4,
            small,
            background,
            disabled,
            handleSizeChange,
            handleCurrentChange,
            newarry,
            current,
            store
        }
    }
}
</script>

<style lang="less" scoped>
.bigbox {
    color: @fontcor2;
}

.imgbox1 {
    height: 300px;
    width: 100%;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
    }
}

.us {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        margin-left: 180px;
        margin-top: -20px;

        .eng {
            font-size: @fontsize2;
        }

        .china {
            font-size: @fontsize;
        }
    }

    .right {
        margin-right: 60px;
        margin-bottom: -45px;
    }
}

.logoto {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .minbox {
        width: 150px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        outline: 1px solid snow;
    }
}

.newsbox {
    height: 600px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;

    .leftimg {
        height: 400px;
        width: 600px;
        // outline: 1px solid red;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .fengye {
        height: 400px;
        width: 800px;
        // outline: 1px solid rgb(12, 215, 56);

        .demo-pagination-block+.demo-pagination-block {
            // background-color: rgba(240, 248, 255, 0);
            margin-top: 10px;
        }

        .demo-pagination-block .demonstration {
            // background-color: rgba(240, 248, 255, 0);
            margin-bottom: 16px;

        }
    }
}

.cor {
    h1 {
        color: rgb(255, 255, 255);
    }

    h4 {
        color: rgb(255, 255, 255);
    }
}
</style>